<template>
  <d2-container :filename="filename" type="full" class="page">
    <d2-grid-layout
            v-bind="layout"
            @layout-updated="layoutUpdatedHandler">
      <d2-grid-item
              v-for="(item, index) in layout.layout"
              :key="index"
              v-bind="item"
              @resize="resizeHandler"
              @move="moveHandler"
              @resized="resizedHandler"
              @moved="movedHandler">
        <el-card shadow="never" class="page_card">
          <el-tag size="mini" type="info" slot="header">{{item.title}}</el-tag>
          <template v-if="item.i === '0'">
            <h2>{{item.item}}</h2>
          </template>
        </el-card>
      </d2-grid-item>
    </d2-grid-layout>
  </d2-container>
</template>

<script>
// import menu from '../../../menu/modules/home_menu'
export default {
  data () {
    return {
      saysomething: 'cy',
      filename: __filename,
      layout: {
        layout: [
          { 'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0', 'title': '询盘统计', 'item': this.saysomething },
          { 'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1' },
          { 'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2' },
          { 'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3' },
          { 'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4' },
          { 'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5' }
          // { 'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6' },
          // { 'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7' }
        ],
        colNum: 12,
        rowHeight: 30,
        isDraggable: true,
        isResizable: true,
        isMirrored: false,
        verticalCompact: true,
        margin: [10, 10],
        useCssTransforms: true
      }
    }
  },

  mounted () {
    // 加载完成后显示提示
    this.showInfo()
    // this.$store.dispatch('d2admin/menu/asideCollapseSet', true)
    // this.$store.commit('d2admin/menu/asideSet', menu)
  },
  methods: {
    test_button: function () {
      this.$store.dispatch('d2admin/menu/asideCollapseToggle')
    },
    log (arg1 = 'log', ...logs) {
      if (logs.length === 0) {
        console.log(arg1)
      } else {
        console.group(arg1)
        logs.forEach(e => {
          console.log(e)
        })
        console.groupEnd()
      }
    },
    // 显示提示
    showInfo () {
      this.$notify({
        title: '三猪提示你：',
        message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
      })
    },
    // 测试代码
    layoutUpdatedHandler (newLayout) {
      console.group('layoutUpdatedHandler')
      newLayout.forEach(e => {
        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
      })
      console.groupEnd()
    },
    resizeHandler (i, newH, newW) {
      this.log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
    },
    moveHandler (i, newX, newY) {
      this.log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
    },
    resizedHandler (i, newH, newW, newHPx, newWPx) {
      this.log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
    },
    movedHandler (i, newX, newY) {
      this.log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .page {
    .vue-grid-layout {
      background-color: $color-bg;
      border-radius: 4px;
      margin: -10px;
      .page_card {
        height: 100%;
        @extend %unable-select;
      }
      .vue-resizable-handle {
        opacity: .3;
        &:hover{
          opacity: 1;
        }
      }
    }
  }
</style>
